<template>
  <view class="songs_list_songs">
    <!-- <view class="header" :style="{ background:`linear-gradient(45deg,${color},${colors})`}"> -->
    <view class="header" :style="{ background: 'linear-gradient(45deg,' + color + ',' + colors + ')' }">
      <view class="wyf">
        <text style="font-size: 30rpx; color: #f4edf1; transform: translate(230rpx,25rpx); margin-left: 10rpx;">{{ title }}</text>
        <image :src="songListPic" mode="widthFix"></image>
        <text
          style=" overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin: 20rpx;
        transform: translate(0, 30rpx);
        color: #dbc3cb;"
        >
          {{ songListDescription }}
        </text>
      </view>
      <view class="authorInfo">
        <image :src="authorPic" mode="widthFix"></image>
        <text style="color: #dbc3cb; vertical-align: middle; font-size: 25rpx;">{{ authorName }}</text>
      </view>
      <view class="type">
        <text style="color: #fdfdfe;" v-for="(item, i) in algTags" :key="i">{{ item }}></text>
      </view>
      <!-- <text class="hhh iconfont icon-dkw_bofang">{{ (playCount / 10000).toFixed(1) + '万' }}</text> -->
      <text class="hhh iconfont icon-dkw_bofang">{{ playCount > 100000000 ? (playCount / 100000000).toFixed(2) + '亿' : (playCount / 10000).toFixed(1) + '万' }}</text>
      <view class="able">
        <text class="iconfont icon-zhuanfa">{{ shareCount }}</text>
        <text class="iconfont icon-jianyi-copy">{{ commentCount }}</text>
        <text v-if="collectStatus === false" class="iconfont icon-shoucang-copy" @click="collect(1)">{{ subscribedCount }}</text>
        <text v-else-if="collectStatus === true" class="iconfont icon-shoucang" @click="collect(2)"></text>
      </view>
    </view>
    <view class="footer">
      <view class="song_container">
        <text class="iconfont icon-bofangqi-bofangshu"></text>
        <text style="transform: translateX(-200rpx); line-height:70rpx; font-size:30rpx">播放全部</text>
        <text class="iconfont icon-xuanze-" style="font-size: 70rpx;"></text>
      </view>
      <scroll-view scroll-y="true" enable-flex class="scroll_container">
        <!-- <scroll-view scroll-y="true" enable-flex class="scroll_container" @scrolltolower="scrolltolower"> -->
        <view v-for="(item, i) in songs" :key="item.id" class="footer_container" @click="navTosongsDetail(item.id, i)">
          <image :src="item.al.picUrl" mode="widthFix"></image>
          <view class="text">
            <text>{{ item.name }}</text>
            <text class="wyfs">{{ item.ar[0].name + ' -' + item.al.name }}</text>
          </view>
          <text class="iconfont icon-gengduo-shuxiang"></text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
const app = getApp({ allowDefault: true })
import { mapState } from 'vuex'
export default {
  onLoad(options) {
    // console.log(options)
    this.id = options.id
    this.getSongsListSongs()
    this.getSongsListDeatil()
    // this.collectStatus = app.globalData.collectStatus
    // console.log(app.globalData.collectStatus)
  },

  data() {
    return {
      // 歌单的id
      id: '',
      // limit: 12,
      // totalPage: 0,
      // Page: 1,
      songs: [],
      colorList: ['#b67d90', '#ba76b6', '#94DBFF', '#8b8b8b', '#C7A3ED', '#CC9898', '#7879b5', '#9877b3', '#6f89b0', '#748cb4', '#ba747c', '#e0746a'],
      songListPic: '',
      songListDescription: '',
      title: '',
      playCount: '',
      // 用户头像和id
      authorPic: '',
      authorName: '',
      // 歌单类型推荐原因
      algTags: [],
      // 转发评论收藏
      shareCount: '',
      commentCount: '',
      subscribedCount: '',
      collectStatus: ''
    }
  },
  computed: {
    ...mapState({ cookie: state => state.login.cookie }),
    color() {
      // var backColor = Math.floor(Math.random() * 512)
      // var r = backColor.toString(16)
      // var g = backColor.toString(16)
      // var b = backColor.toString(16)
      // var color = '#' + r + g + b
      var colorIndex = Math.floor(Math.random() * this.colorList.length)
      var color = this.colorList[colorIndex]
      return color
    },
    colors() {
      // var backColor = Math.floor(Math.random() * 512)
      // var r = backColor.toString(16)
      // var g = backColor.toString(16)
      // var b = backColor.toString(16)
      // var color = '#' + r + g + b
      var colorIndex = Math.floor(Math.random() * this.colorList.length)
      var colors = this.colorList[colorIndex]
      return colors
    }
  },
  methods: {
    async getSongsListSongs(limit) {
      const { data: res } = await uni.$http.get('playlist/track/all', { id: this.id, limit })
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('歌曲数据列表获取失败')
      this.songs = res.songs
      // this.totalPage = Math.ceil(res.songs.length / 12)
      // console.log(this.totalPage);
    },
    // scrolltolower() {
    //   if (this.Page >= this.totalPage) {
    //     uni.showToast({
    //       title: '没有下一页了'
    //     })
    //   } else {
    //     this.limit += 12
    //     this.Page++
    //     this.getSongsListSongs(this.limit)
    //   }
    // },
    async getSongsListDeatil() {
      const { data: res } = await uni.$http.get('playlist/detail', { id: this.id })
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('歌单数据获取失败')
      this.songListPic = res.playlist.coverImgUrl
      this.songListDescription = res.playlist.description
      this.title = res.playlist.name
      this.algTags = res.playlist.algTags
      this.playCount = res.playlist.playCount
      this.shareCount = res.playlist.shareCount
      this.commentCount = res.playlist.commentCount
      this.subscribedCount = res.playlist.subscribedCount
      this.collectStatus = res.playlist.subscribed
      // this.collect()
      this.getAuthorDeatil(res.playlist.userId)
    },
    async getAuthorDeatil(id) {
      const { data: res } = await uni.$http.get('user/detail', { uid: id })
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('歌单作者详情数据获取失败')
      this.authorPic = res.profile.avatarUrl
      this.authorName = res.profile.nickname
    },
    async collect(t) {
      const { data: res } = await uni.$http.get('playlist/subscribe', { id: this.id, t: t, cookie: this.cookie })
      if (t === 1) {
        console.log(res)
        if (res.code !== 200) return uni.$showMsg('收藏失败')
        this.collectStatus = true
        app.globalData.collectStatus = true
      } else if (t === 2) {
        if (res.code !== 200) return uni.$showMsg('取消收藏失败')
        this.collectStatus = false
        app.globalData.collectStatus = false
      }
    },
    navTosongsDetail(id, i) {
      uni.navigateTo({
        url: '/subpkg/songs_detail/songs_detail?id=' + id
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  position: relative;
  width: 100%;
  height: 40vh;
}
.wyf {
  display: flex;
  flex-direction: column;
}
.wyf image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 20rpx;
  margin: -10rpx 30rpx;
}
.authorInfo {
  position: absolute;
  left: 30%;
  top: 20%;
}
.authorInfo text {
  margin: 1rpx;
  // margin: 20rpx;
  transform: translate(0, 50rpx);
  color: #dbc3cb;
}
.type {
  display: flex;
  font-weight: 550;
  font-size: 25rpx;
  transform: translate(230rpx, -130rpx);
}
.type text {
  color: #dbc3cb;
  background: rgba(250, 246, 247, 0.3);
  border-radius: 10rpx;
  margin-left: 30rpx;
}
.header .hhh {
  position: absolute;
  left: 16%;
  top: 8%;
  font-size: 20rpx;
  color: #fefefe;
  // font-weight: 550;
}

.authorInfo image {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin: -30rpx 10rpx -30rpx 30rpx;
}
.able {
  display: flex;
  align-items: center;
  justify-content: space-around;
  transform: translate(0, 60rpx);
}
.able text {
  width: 150rpx;
  height: 70rpx;
  border-radius: 20rpx;
  background: rgba(250, 246, 247, 0.3);
  line-height: 70rpx;
  text-align: center;
  font-size: 30rpx;
  color: #fefefe;
}
.song_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // margin-top: 140rpx;
  height: 80rpx;
  position: relative;
  overflow: hidden;
  &::after {
    position: absolute;
    content: '';
    display: block;
    background: #eccfcb;
    width: 100%;
    height: 20rpx;
    bottom: 0;
    left: 0%;
    right: 0;
    top: 0;
    border-radius: 50%;
    transform: translate(0rpx, -10rpx);
  }
}
.song_container .iconfont {
  margin: 0 10rpx;
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
}
.icon-bofangqi-bofangshu {
  font-size: 70rpx;
}
.footer {
  border-radius: 20rpx;
}
.footer_container {
  position: relative;
  display: flex;
  margin: 15rpx;
}
.footer_container image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 20rpx;
}
.text {
  display: flex;
  flex-direction: column;
  vertical-align: middle;
  // justify-content: flex-start;
  // align-items: flex-start;
  font-size: 28rpx;
  margin-left: 20rpx;
}
.text .wyfs {
  color: #808080;
  font-size: 24rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 15rpx;
  max-width: 400rpx;
}
.scroll_container {
  height: calc(60vh - 80rpx);
}
.icon-gengduo-shuxiang {
  position: absolute;
  right: 0;
  margin: 0 -20rpx;
  line-height: 100rpx;
  height: 100rpx;
}
</style>
